﻿<%@page import="com.rosense.client.i.IWriteReader"%>
<%@page import="com.rosense.server.config.HostCaches"%>
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<style>
.layui-laydate {
	top: 35px !important;
}
</style>
<div style="position: relative;">
	<table style="width: 100%;" class="layui-form">
		<tr>
			<td style="width: 200px;"><select lay-filter="host" id="host">
					<%
						for(String host:HostCaches.hostMap.keySet()){
					%>
					<option value="<%=host%>"><%=host%></option>
					<%
						}
					%>
			</select></td>
			<td style="width: 100px;"><select lay-filter="type" id="type">
					<%
						for(IWriteReader wr:HostCaches.wrMap.values()){
					%>
					<option value="<%=wr.getName()%>"><%=wr.getText()%></option>
					<%
						}
					%>
			</select></td>
			<td style="width: 300px;"><input type="text" style="margin-left: 5px;" class="layui-input" id="time"
				readonly="readonly" placeholder="选择时间" value=""></td>
			<td>
				<button class="layui-btn layui-btn-normal " id="query-btn">查询</button>
			</td>
		</tr>
	</table>
</div>
<div style="height:300px;width:600px;margin:0 auto">
	<canvas id="line_history" class="simple-body-small"  class="chartjs" ></canvas>
</div>
<div style="padding: 5px;">
	<table class="table-hosts" id="table-hosts">
		<thead>
			<tr>
				<th>时间</th>
				<th>描述</th>
			</tr>
		</thead>
		<tbody id="history-tbody-hosts"></tbody>
	</table>
</div>
<!-- layui规范化用法 -->
<script type="text/javascript">
	var hei = $(document).height();
	$(document).ready(function() {
		$("#table-hosts").width($(document).width() - 280);
		form.render('select');
		//常规用法
		laydate.render({
			elem : '#time',
			type : 'date',
			format : 'yyyyMMdd',
			theme : '#393D49',
			done : function(value, date, endDate) {
			}
		});
	});
	$(document).on("click", "#query-btn", function() {
		loadHistoryLine();
		loadHistory();
	});
	function loadHistory() {
		workUtils.ajaxGet("../data/onehost", {
			host : $("#host").val(),
			type : $("#type").val(),
			time : $("#time").val(),
		}, function(data) {
			var html = "";
			for ( var i in data) {
				var item = data[i];
				html += '<tr>';
				html += '<td  style="width:20%">' + item.time;
				html += '</td>';
				html += '<td style="width:80%">' + item.value + '</td>';
				html += '</tr>';
			}
			$("#history-tbody-hosts").html(html);
		});
	}
	function loadHistoryLine() {
		workUtils.ajaxGet("../data/onehostLine", {
			host : $("#host").val(),
			type : $("#type").val(),
			time : $("#time").val(),
		}, function(data) {
			for (var i = 0; i < data.length; i++) {
				eval(data[i]);
			}
		});
	}
</script>